<template>
  <div>
    <Row>
      <i-col :span="6">
        <Row>
          <Button icon="md-refresh" type="primary" @click="fetchTreeData">刷新</Button>
        </Row>
        <Row style="margin-top:20px">
          <u-tree :tree="tree" @item-click="itemClick"></u-tree>
          <Spin v-if="loadingTree">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>加载中</div>
          </Spin>
        </Row>
      </i-col>
      <i-col :span="18">
        <u-form-grid :data="formGrid" ref="formGrid"></u-form-grid>
      </i-col>
    </Row>
  </div>
</template>

<script>
import deepExtend from 'deep-extend';

export default {
    name: 'Resources',
    data () {
        return {
            loadingTree: false,
            tree: [],
            formGrid: {
                options: {
                    url: {
                        page: '/ueboot/resources/page',
                        save: '/ueboot/resources/save',
                        delete: '/ueboot/resources/delete'
                    }
                },
                toolbar: {
                    superFilter: {
                        columns: [{type: 'hidden', name: 'parentId'}]
                    }
                },
                form: {
                    labelWidth: 100,
                    modal: {
                        title: {
                            add:'添加资源',
                            edit:'编辑资源',
                            view:'资源详情'
                        }
                    },
                    columns: [
                        {
                            label: '资源类型',
                            type: 'select',
                            name: 'resourceType',
                            required: true,
                            data: [{'name': '菜单组', 'value': '菜单组'}, {'name': '菜单', 'value': '菜单'},
                {'name': '功能', 'value': '功能'}
                            ],
                            onChange: (value) => {
                                console.log(value);
                                this.changeResourceType(value);
                            }
                        },
            {label: '资源名称', type: 'text', name: 'name', required: true},
                        {label: '父级资源', type: 'treeSelect', name: 'parentId', required: true, tree: [],fieldFormat:(value,row)=>{
                //如果parentId不存在，则默认为根节点
                            if(!value){
                                return 0;
                            }
                            return value;
                        }},
                        {
                            label: '菜单icon名称',
                            type: 'text',
                            placeholder: '系统指定的icon名称',
                            name: 'iconName',
                            fieldFormat: (value, row) => {
                                let themeJson = row['themeJson'] || null;
                                if (themeJson !== null) {
                                    return JSON.parse(themeJson)['iconName'];
                                } else {
                                    return '';
                                }
                            }
                        },
                        {
                            label: '菜单字体颜色',
                            type: 'text',
                            placeholder: '任意颜色值如:#FFFFFF',
                            name: 'fontColor',
                            fieldFormat: (value, row) => {
                                let themeJson = row['themeJson'] || null;
                                if (themeJson !== null) {
                                    return JSON.parse(themeJson)['fontColor'];
                                } else {
                                    return '';
                                }
                            }
                        },
            {label: '资源路径', type: 'text', name: 'url', required: true},
            {label: '权限标识符', type: 'text', name: 'permission', required: true},
            {label: '排序', type: 'number', placeholder: '数值越大，排序越靠前', name: 'rank'},
                        {
                            label: '是否启用',
                            type: 'select',
                            name: 'available',
                            data: [{'name': '启用', 'value': 'true'}, {'name': '不启用', 'value': 'false'}
                            ],
                            init: 'true'
                        }
                    ],
          // 表单提交之前（校验之后），返回如果为false,则不继续执行后续操作
          // data为需要提交表单前的属性
                    submitBefore: function (data) {
            // 重新拼装一下请求对象格式
                        data['theme'] = {'iconName': data['iconName'], 'fontColor': data['fontColor']};
                        return true;
                    },
                    submitAfter: () => {
            // 重新加载一次树结构
                        this.fetchTreeData();
                    }
                },
                table: {
                    rowClick:(row,index)=>{
                        this.$refs['formGrid'].$refs['dataTable'].toggleSelect(index)
                    },
                    size: 'small',
                    operation: {
                        primaryKey: 'id'
                    },
                    columns: [
            {title: 'ID', key: 'id', minWidth: 60},
            {title: '资源名称', key: 'name', minWidth: 100},
            {title: '资源类型', key: 'resourceType', minWidth: 100},
            {title: '资源路径', key: 'url', minWidth: 150},
                        {
                            title: '菜单icon名称',
                            key: 'iconName',
                            minWidth: 100,
                            fieldFormat: (value, row) => {
                                let themeJson = row['themeJson'] || null;
                                if (themeJson !== null) {
                                    return JSON.parse(themeJson)['iconName'];
                                } else {
                                    return '';
                                }
                            }
                        },
                        {
                            title: '菜单字体颜色',
                            key: 'fontColor',
                            minWidth: 100,
                            fieldFormat: (value, row) => {
                                let themeJson = row['themeJson'] || null;
                                if (themeJson !== null) {
                                    return JSON.parse(themeJson)['fontColor'];
                                } else {
                                    return '';
                                }
                            }
                        },
            {title: '权限标识符', key: 'permission', minWidth: 140},
            {title: '父级资源', key: 'parentName', minWidth: 100},
            {title: '排序', key: 'rank', minWidth: 80, init: 1},
                        {
                            title: '是否启用',
                            key: 'available',
                            align: 'center',
                            minWidth: 120,
                            fieldFormat: (value, row) => {
                                if (value) {
                                    return '是';
                                } else {
                                    return {value: '否', cellClassName: 'table-cell-red'};
                                }
                            }
                        }
                    ]
                }
            }
        };
    },
    created () {
        this.fetchTreeData();
    },
    methods: {
    // 获取树结构数据
        fetchTreeData () {
            this.loadingTree = true;
            this.$axios.post('/ueboot/resources/list', {}).then((response) => {
                this.loadingTree = false;
        // 默认给出一个根节点数据，后台插入的时候不校验是否存在
                let tree = [{id: 0, 'name': '根节点', parentId: null}];
                response.body.forEach((t) => {
                    if (t.resourceType === '功能') {
                        t.icon = 'fa fa-file';
                    }
                });
                this.tree = [...response.body];
        // 合并数组
                let formTree = [...tree, ...response.body];
        // 为防止tree点击后影响整个tree数据，导致formGrid发生监听变化
                let newTree = [];
                formTree.forEach((t) => {
                    let n = deepExtend({}, t);
                    newTree.push(n);
                });
        // 改变form表单中对应字段的tree值，这个需要代码主动修改一次
                this.$set(this.formGrid.form.columns[2], 'tree', newTree);
            });
        },
        changeResourceType (value) {
            if (value === '菜单组') {
        // 隐藏部分字段
                this.formGrid.form.columns.forEach((c) => {
                    if (['url', 'permission'].includes(c.name)) {
                        c.add = {show: false};
                        c.edit = {show: false};
                        c.view = {show: false};
                        c.required = false;
                    }
                });
            } else if (value === '功能') {
        // 隐藏部分字段
                this.formGrid.form.columns.forEach((c) => {
                    if (['url', 'iconName', 'fontColor', 'rank'].includes(c.name)) {
                        c.add = {show: false};
                        c.edit = {show: false};
                        c.view = {show: false};
                        c.required = false;
                    }
                });
            } else {
                this.formGrid.form.columns.forEach((c) => {
                    if (['url', 'permission', 'iconName', 'fontColor', 'rank'].includes(c.name)) {
                        c.add = {show: true};
                        c.edit = {show: true};
                        c.view = {show: true};
                        c.required = true;
                    }
                    if (['fontColor', 'iconName'].includes(c.name)) {
                        c.required = false;
                    }
                });
            }
        },
        itemClick (oriNode, oriItem, e) {
      // 查询当前节点下的子节点，更改grid查询条件.和弹出表单当中的下拉框
            this.$set(this.formGrid.toolbar.superFilter.columns[0], 'init', oriItem.id);
            this.$set(this.formGrid.form.columns[2], 'init', oriItem.id);

            this.$refs.formGrid.$emit('reloadData');
        }
    }
};
</script>
<style>
  .table-cell-green {
    background-color: #0c6 !important;
    color: #fff;
  }

  .table-cell-red {
    background-color: red !important;
    color: #fff;
  }
</style>
